<template>
	<view class="flex-row flex-start flex-wrap">
		<template v-if="dataList.length>=1">
			<view class="commondity flex-column flex-center" v-for="(item,index) in dataList" :key="index"
				:style="'width:'+itemW+';'" @tap="goSearchList(item,index)">
				<image class="img" :src="item.imgUrl" mode=""></image>
				<text>{{item.name}}</text>
			</view>
		</template>
		<template v-else>
			<view class="right-list">
				暂无分类哦，请浏览其他商品吧！
			</view>
		</template>
	</view>
</template>

<script>
	export default {
		props: {
			dataList: Array,
			itemW: {
				type: String,
				default: '187rpx'
			},
			shopW: {
				type: String,
				default: '200rpx'
			},
			shopH: {
				type: String,
				default: '200rpx'
			}
		},
		methods: {
			goSearchList(item, index) {
				let keyWord = item.name
				uni.navigateTo({
					url: "/pages/search-list/search-list?keyWord=" + keyWord + ""
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.commondity {
		flex: 0 0 30%;
		height: 240rpx;
		margin-top: 10px;
		margin-bottom: 10px;

		.img {
			width: 60%;
			height: 150rpx;
		}

		.shopName {
			font-size: 22rpx;
			margin-top: 10px;
		}
	}

	text {
		font-size: 24rpx;
		margin-top: 8rpx;
	}

	.right-list {
		width: 100%;
		height: 1000rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>